<template>
  <div style="margin:10px;" class="con">
    <preview-json-row class="row" :class="getJsonStyle(item)" v-for="(item,index) in $data.list"
                      :key="index" :model-value="item"
                      :hidden-if="{status:0,netMilliSeconds:0,execMilliSeconds:0,totalMilliSeconds:0,isRequest:false,createAt:'*',userId:'-'}"
                      sort="id,isRequest,status,recvAt,serviceName,appName,userId,logLevel,path,query,-requestBody,-responseBoyd,-msg">

    </preview-json-row>
  </div>
</template>

<style lang="scss" scoped>

.con {
  counter-reset: sectioncounter;

  .row {
    border-bottom: solid 1px gray;
    margin: 8px;
    display: inline-block;
    padding: 4px;
    white-space: pre-wrap;
    word-break: break-all;
    border-radius: 10px;
    position: relative;

    &.log-err ::v-deep(.logLevel) {
      border-color: red;

      > label:first-child {
        background-color: red !important;
      }
    }

    &.status-err ::v-deep(.status) {
      border-color: red;

      > label:first-child {
        background-color: red !important;
      }
    }

    &.status-ok ::v-deep(.status) {
      border-color: green;

      > label:first-child {
        background-color: green !important;
      }
    }
  }


  .row:before {
    content: " ";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -999;
    opacity: 0.3;
    border-radius: 10px;
  }

  .row:after {
    content: counter(sectioncounter);
    counter-increment: sectioncounter;
    font-weight: bold;
    color: white;
    font-family: HelveticaNeue-Bold, HelveticaNeue;
    position: absolute;
    left: -8px;
    top: -2px;
    background: #fa9914;
    width: 20px;
    height: 20px;
    border-radius: 18px;
    text-align: center;
    z-index: 999;
  }

  .row:nth-of-type(5n+1):before {
    background-color: #75f0fc;
  }

  .row:nth-of-type(5n+2):before {
    background-color: #fdeeaa;
  }

  .row:nth-of-type(5n+3):before {
    background-color: #b5b3ff;
  }

  .row:nth-of-type(5n+4):before {
    background-color: #8cfec0;
  }

  .row:nth-of-type(5n):before {
    background-color: #feb9bd;
  }
}
</style>
<script setup>
/**
 * Created by CodeGenerator  at 2021-03-15 10:31:23
 */
import previewJsonRow from "../../../component/preview-json-row.vue";


defineOptions({
  name: "file-log",
  inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({
  list: []
});

const $props = defineProps({
  requestId: {type: String},
});


const db = jv.$route.query.db || "-";

const getJsonStyle = row => {
  var ret = [];
  if (row.logLevel == 'ERROR') {
    ret.push("log-err")
  }

  if (row.isRequest) {
    ret.push(row.status == 200 ? "status-ok" : "status-err")
  }

  return ret;
};

onMounted(function () {
  jv.$http.post(`/dev/es/file-log/list/${db}/${$props.requestId}`).then(res => {
    $data.list = res.data.data;
    $data.list.forEach(it => {
      if (it.isRequest) {
        var path = it.path
            .replace("https://huatuocloud.com", "")
            .replace("https://test.huatuocloud.com", "")
            .replace("http://app-api", "")

        it["地址"] = jv.pathDict[path] || path
      }

      delete it["ecs.version"]
      delete it["@timestamp"]
      delete it["requestId"]
      delete it["adjustId"]
      delete it["sort"]
      delete it["deviceId"]
      delete it["pkgName"]
      delete it["requestBody"]
      delete it["responseBody"]
      delete it["path"]
    })
  });
})

document.title = "日志追溯";
</script>
